<template>
    <div class="earth-container">
      <!-- 浮动文本 -->
      
  
      <!-- SVG 图标 -->
      <Belt2_2_N ref="svgRef" class="earth-svg" />
    </div>
  </template>
  
  
  <script setup lang="ts">
  // import EarthIcon from "../../../assets/5_2_1kuang.svg";D:\程序\web项目\vue_three\configuration-svg\src\assets\camera.svg
  import Belt2_2_N from '@/assets/camera.svg';
 
  </script>
  
  <style scoped>
  .earth-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative; /* 新增定位上下文 */
  }
  
  .earth-svg {
    transform-origin: center;
    display: block;
  }
  /* 浮动文字样式 */
  .belt-speed-label {
    position: absolute;
    top: 65px;       /* 可调整 */
    left: -5px;      /* 可调整 */
    color: rgb(0, 255, 255);
    font-size: 10px;
    transform: rotate(0deg); /* ← 添加旋转 */
    pointer-events: none; /* 不影响 SVG 交互 */
    
    align-items: center;
    z-index: 10;
  }
  </style>
  